<template>
  <div class="conten-box" id="countToWrapper">
    <div class="img">
      <img src="../../images/center.png" alt="">
    </div>
    <div class="total" v-for="(list,index) in 1" :key="'total-' + index">
      <countTo :startVal="0" ref="countToss" :endVal="item.tKey" :duration="3000" separator="" :prefix="getNumberString(item.tKey)"> </countTo>
    </div>
    <div class="data" v-for="(list,index) in 1" :key="'data-' + index">
      <li class="month">
        <countTo :startVal="0" ref="countToss" :endVal="item.mKey" :duration="3000"> </countTo>
      </li>
      <li class="week">
        <countTo :startVal="0" ref="countToss" :endVal="item.wKey" :duration="3000"> </countTo>
      </li>
      <li class="date">
        <countTo :startVal="0" ref="countToss" :endVal="item.dKey" :duration="3000"> </countTo>
      </li>
    </div>
  </div>
</template>
<script>
import countTo from 'vue-count-to' // 导入插件

export default {
  name:'stadium',
  components: {
    countTo
  },
  props:{
    item:{
      type:Object,
      default(){
        return {
          dKey: 0,
          mKey: 0,
          tKey: 0,
          wKey: 0,
          venueType: "",
        }
      }
    }
  },
  data() {
    return {
      remainingTime: 30, // 初始剩余时间为30秒
      countdownTimer: null,
    }
  },
  watch: {},
  computed: {
    // 动态计算图片路径
    imagePath() {
      return `/images/n_0${this.num}.png`;
    }
  },
  created() {},
  mounted() {
    // 初始化倒计时
    this.startCountdown()
  },
  beforeDestroy() {
    this.countdownTimer && clearInterval(this.countdownTimer);
  },
  methods:{
    // 距离刷新时间还有30秒的方法
    startCountdown() {
      this.remainingTime = 30; // 重置剩余时间为30秒
      this.countdownTimer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--;
          // 小于10以下 补0
          if (this.remainingTime < 10) {
            this.remainingTime = `0${this.remainingTime}`;
          }
        } else {
          clearInterval(this.countdownTimer);
          // 刷新数据
          this.init();
          this.startCountdown();
        }
      }, 1000);
    },
    init(){
      // 创建实例  循环调用 所有 dom
      const io = new IntersectionObserver((entries) => {
      // entries 实际上是dom
      // 将其转为数组，遍历
        Array.from(entries).forEach((item) => {
          if (item.intersectionRatio > 0.1) {
          // intersectionRatio 相交区域和目标元素的比例值 
          // intersectionRect/boundingClientRect 不可见时小于等于0
          // intersectionRatio和isIntersecting是用来判断元素是否可见的
            const countToss = this.$refs.countToss
          // 通过$refs获取实例，遍历调用实例方法start()  
            countToss.map((counto) => {
              counto.start()
            })
          }
        })
      })
      // 获取所有 countToWrapper 标签 开始观察
      const countToWrapper = document.getElementById('countToWrapper')
      io.observe(countToWrapper)
    }
  }
}
</script>
<style lang="scss" scoped>
.conten-box{
  position: relative;
  width: 100%;
  height: 100%;
  .total{
    position: absolute;
    top: 3px;
    left: 20px;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    font-size: 40px;
    letter-spacing: 24px;
  }
  .img{
    position: absolute;
    top: 60px;
    height: 650px;
    width: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .data{
    position: absolute;
    top: 160px;
    left: 160px;
    li{
      width: 120px;
      text-align: center;
      list-style: none;
      font-size: 38px;
      font-weight: bold;
      background: -webkit-linear-gradient(#fbcd35 50%, #ff9c57 100%);; /* Safari 5.1 到 6.0 */
      background: -o-linear-gradient(#fbcd35 50%, #ff9c57 100%);; /* Opera 11.1 到 12.0 */
      background: -moz-linear-gradient(#fbcd35 50%, #ff9c57 100%);; /* Firefox 3.6 到 15 */
      background: linear-gradient(#fbcd35 50%, #ff9c57 100%);; /* 标准的语法 */
      
      /* 设置文字填充背景 */
      -webkit-background-clip: text; /* Safari 和 Chrome */
      -webkit-text-fill-color: transparent; /* Safari 和 Chrome */
      
      /* 对于旧版 Mozilla Firefox，需要使用额外的属性 */
      -moz-background-clip: text; /* Mozilla Firefox */
      color: transparent; /* Mozilla Firefox */

      background-clip: text;
      color: transparent;
      // 本月
      &.month{
        position: absolute;
        top: -60px;
        left: 30px;
      }
      // 本周
      &.week{
        position: absolute;
        top: 6px;
        left: 160px;
      }
      // 今日
      &.date{
        position: absolute;
        top: -32px;
        left: 280px;
      }
    }
  }
}

</style>